<template>
  <div class="mc-prompt" :class="`mc-prompt--${layout}`">
    <div v-if="layout === 'grid'" class="mc-prompt__grid">
      <div
        v-for="prompt in prompts"
        :key="prompt.id"
        class="mc-prompt__item"
        @click="handleSelect(prompt)"
        :style="{ gridColumn: `span ${columns}` }"
      >
        <div class="mc-prompt__icon">{{ prompt.icon || '💡' }}</div>
        <div class="mc-prompt__title">{{ prompt.title }}</div>
      </div>
    </div>
    
    <div v-else class="mc-prompt__list">
      <div
        v-for="prompt in prompts"
        :key="prompt.id"
        class="mc-prompt__item"
        @click="handleSelect(prompt)"
      >
        <div class="mc-prompt__icon">{{ prompt.icon || '💡' }}</div>
        <div class="mc-prompt__title">{{ prompt.title }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Prompt {
  id: string
  title: string
  icon?: string
}

interface Props {
  prompts: Prompt[]
  layout?: 'grid' | 'list'
  columns?: number
}

const props = withDefaults(defineProps<Props>(), {
  prompts: () => [],
  layout: 'list',
  columns: 1
})

const emit = defineEmits<{
  select: [prompt: Prompt]
}>()

const handleSelect = (prompt: Prompt) => {
  emit('select', prompt)
}
</script>

<style scoped>
.mc-prompt {
  padding: 16px 0;
}

/* Grid Layout */
.mc-prompt--grid .mc-prompt__grid {
  display: grid;
  gap: 12px;
}

/* List Layout */
.mc-prompt--list .mc-prompt__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mc-prompt__item {
  background: #f9fafb;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 12px;
}

.mc-prompt__item:hover {
  border-color: #667eea;
  background: #f5f3ff;
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}

.mc-prompt__icon {
  font-size: 20px;
  flex-shrink: 0;
}

.mc-prompt__title {
  font-size: 14px;
  color: #374151;
  font-weight: 500;
}

.mc-prompt__item:hover .mc-prompt__title {
  color: #667eea;
}
</style>